<template>
  <div>
    <!-- 头部图片 -->
    <div style="
              width: 100%;
              background-image: url(assets/header.png);
              margin-top: 0px;
              height: 150px;
            ">
      <van-row>
        <van-col><van-image round width="60" height="60" style="margin-top: 50px; margin-left: 10px" src="assets/user.png"
            @click="banben()" /></van-col>
        <van-col style="color: white; margin-top: 70px; margin-left: 10px">{{
          user.nickName
        }}</van-col>
        <van-col style="color: white; margin-top: 70px; margin-left: 10px">
          版本号: V3.11.23.01
        </van-col>
      </van-row>
      <!-- <van-row>
        <van-col style="color: white; margin-top: 70px; margin-left: 10px">
          版本号: V3.11.23.01
        </van-col>
      </van-row> -->
    </div>
    <!-- 图片结束 -->
    <!-- 中间div -->
    <div class="centerDiv">
      <van-row style="height: 80%; margin-top: 5%" type="flex" justify="center">
        <van-col align="center" style="height: 100%" span="10"
          @click="jumpOther('pushMessage', './my-pushMessage.html', '我的消息')">
          <van-image round width="50%" height="60%" src="assets/news.png" />
          <p style="font-weight: bold; color: black; margin-top: 0px" @click="
            jumpOther('pushMessage', './my-pushMessage.html', '我的消息')
            ">
            我的消息
          </p>
        </van-col>
        <van-col align="center" span="2">
          <div style="border: 1px solid black; height: 100%; width: 0px"></div>
        </van-col>
        <van-col align="center" style="height: 100%" span="10"
          @click="jumpOther('finishTask', './my-finishTask.html', '完成任务')">
          <!-- 右侧div -->
          <van-image round width="50%" height="60%" style="margin: 0 auto" src="assets/finishTask.png" />
          <p style="font-weight: bold; color: black; margin-top: 0px"
            @click="jumpOther('finishTask', './my-finishTask.html', '完成任务')">
            完成任务
          </p>
        </van-col>
      </van-row>
    </div>
    <!-- 中间div结束 -->

    <!-- 列表 -->
    <div class="list">
      <!-- 维修审核 -->
      <van-row style="margin-top: 10px" @click="
        jumpOther(
          'requestAssign',
          './maintain-requestAssign.html',
          '维修指派'
        )
        ">
        <van-col span="4" style="color: black">
          <van-image width="40px" height="40px" style="margin-left: 10px" src="assets/repairCheck.png" />
        </van-col>
        <van-col span="17" style="font-weight: bold; color: black; margin-top: 10px">维修指派</van-col>
        <van-col span="2"><van-image width="20px" height="20px" style="margin-top: 5px"
            src="assets/right.png" /></van-col>
      </van-row>
      <van-divider style="margin-top: 3px" />
      <!-- 维修记录 -->
      <van-row style="margin-top: 10px" @click="
        jumpOther('maintainRecord', './my-maintainRecord.html', '维修记录')
        ">
        <van-col span="4" style="color: black">
          <van-image width="40px" height="40px" style="margin-left: 10px" src="assets/repairRecord.png" />
        </van-col>
        <van-col span="17" style="font-weight: bold; color: black; margin-top: 10px">维修记录</van-col>
        <van-col span="2"><van-image width="20px" height="20px" style="margin-top: 5px"
            src="assets/right.png" /></van-col>
      </van-row>
      <van-divider style="margin-top: 3px" />
      <!-- 报修记录 -->
      <van-row style="margin-top: 10px" @click="
        jumpOther('requestRecord', './my-requestRecord.html', '报修记录')
        ">
        <van-col span="4" style="color: black">
          <van-image width="40px" height="40px" style="margin-left: 10px" src="assets/requestRecord.png" />
        </van-col>
        <van-col span="17" style="font-weight: bold; color: black; margin-top: 10px">报修记录</van-col>
        <van-col span="2"><van-image width="20px" height="20px" style="margin-top: 5px"
            src="assets/right.png" /></van-col>
      </van-row>
      <van-divider style="margin-top: 3px" />

      <!-- 呼叫记录 -->
      <van-row style="margin-top: 10px" @click="jumpOther('callRecord', './my-callRecord.html', '呼叫记录')">
        <van-col span="4" style="color: black">
          <van-image width="40px" height="40px" style="margin-left: 10px" src="assets/callRecord.png" />
        </van-col>
        <van-col span="17" style="font-weight: bold; color: black; margin-top: 10px">呼叫记录</van-col>
        <van-col span="2"><van-image width="20px" height="20px" style="margin-top: 5px"
            src="assets/right.png" /></van-col>
      </van-row>
      <van-divider style="margin-top: 3px" />

      <!-- 完成任务 -->
      <van-row style="margin-top: 10px" @click="
        jumpOther('myFinishTask', './my-taskFinishList.html', '完成任务')
        ">
        <van-col span="4" style="color: black">
          <van-image width="40px" height="40px" style="margin-left: 10px" src="assets/myFinishedTask.png" />
        </van-col>
        <van-col span="17" style="font-weight: bold; color: black; margin-top: 10px">我的完成任务</van-col>
        <van-col span="2"><van-image width="20px" height="20px" style="margin-top: 5px"
            src="assets/right.png" /></van-col>
      </van-row>
      <van-divider style="margin-top: 3px" />

      <!-- 维修接单 -->
      <van-row style="margin-top: 10px" @click="jumpOther('requestOrder', './my-requestOrder.html', '维修接单')">
        <van-col span="4" style="color: black">
          <van-image width="40px" height="40px" style="margin-left: 10px" src="assets/order.png" />
        </van-col>
        <van-col span="17" style="font-weight: bold; color: black; margin-top: 10px">维修接单</van-col>
        <van-col span="2"><van-image width="20px" height="20px" style="margin-top: 5px"
            src="assets/right.png" /></van-col>
      </van-row>
      <van-divider style="margin-top: 3px" />

      <!-- 智能制造V2.0消息 -->
      <van-row style="margin-top: 10px" @click="
        jumpOther('pushMessageM', './my-pushMessageM.html', '智能制造V2.0消息')
        ">
        <van-col span="4" style="color: black">
          <van-image width="40px" height="40px" style="margin-left: 10px" src="assets/repairCheck.png" />
        </van-col>
        <van-col span="13" style="font-weight: bold; color: black; margin-top: 10px">智能制造V2.0消息</van-col>
        <van-col span="4">
          <van-tag type="danger" v-if="notReadNum != 0" round>{{ notReadNum }}</van-tag>
        </van-col>
        <van-col span="2"><van-image width="20px" height="20px" style="margin-top: 5px"
            src="assets/right.png" /></van-col>
      </van-row>

      <!-- <van-row style="margin-top: 10px" @click="
        jumpOther('pushMessageP', './my-pushMessageP.html', '智能制造V2.0加严管控消息')
      ">
        <van-col span="4" style="color: #a9a9a9">
          <van-image width="40px" height="40px" style="margin-left: 10px" src="assets/repairCheck.png" />
        </van-col>
        <van-col span="17" style="font-weight: bold; color: #a9a9a9; margin-top: 10px">智能制造V2.0加严管控消息</van-col>
        <van-col span="2"><van-image width="20px" height="20px" style="margin-top: 5px"
            src="assets/right.png" /></van-col>
      </van-row> -->

      <van-divider style="margin-top: 3px" />


      <!-- 主动抽查 -->
      <!-- <van-row style="margin-top: 10px" @click="
        jumpOther('initiativeCheck', './my-initiativeCheck.html', '主动抽查')
      ">
        <van-col span="4" style="color: #a9a9a9">
          <van-image width="40px" height="40px" style="margin-left: 10px" src="assets/extract.png" />
        </van-col>
        <van-col span="17" style="font-weight: bold; color: #a9a9a9; margin-top: 10px">主动抽查</van-col>
        <van-col span="2"><van-image width="20px" height="20px" style="margin-top: 5px"
            src="assets/right.png" /></van-col>
      </van-row>

      <van-divider style="margin-top: 3px" /> -->

      <!-- 被动抽查 -->
      <!-- <van-row style="margin-top: 10px" @click="
        jumpOther('passivityCheck', './my-passivityCheck.html', '被动抽查')
      ">
        <van-col span="4" style="color: #a9a9a9">
          <van-image width="40px" height="40px" style="margin-left: 10px" src="assets/passivity.png" />
        </van-col>
        <van-col span="17" style="font-weight: bold; color: #a9a9a9; margin-top: 10px">被动抽查</van-col>
        <van-col span="2"><van-image width="20px" height="20px" style="margin-top: 5px"
            src="assets/right.png" /></van-col>
      </van-row> -->
    </div>

    <!-- 退出按钮 -->
    <div class="button">
      <Button size="large" type="danger" round border color="#f58220" @click="remove"
        style="color: white; font-size: bold">退出</Button>
    </div>

    <div>{{ suggests }}</div>
  </div>
</template>
<script>
import { _httpClient } from "@/libs/api";
import { _httpClient as _httpClientSIE } from "@/libs/apisie";
import { storage, globelTimer } from "@/libs/utils";
import { removeToken, getToken } from "@/libs/auth";
import {
  Button,
  Toast,
  Dialog,
  Image as VanImage,
  Col,
  Row,
  Divider,
  ActionSheet,
  Tag
} from "vant";
import apicloud from "@/libs/apicloud";
Vue.use(VanImage);
Vue.use(Col);
Vue.use(Row);
Vue.use(Divider);
Vue.use(Toast);
Vue.use(Dialog);
Vue.use(Tag);
export default {
  name: "tab3",
  components: { Button, Toast, Dialog, ActionSheet },
  data() {
    return {
      user: [],
      suggests: "",
      actionSheetShow: false,
      actions: [{ id: "1", name: "报修审核" }],
      list: [],
      //未读消息数量
      notReadNum: 0
    };
  },
  created() {
    api.fullScreen = true;
    let that = this;
    that.user = JSON.parse(storage.get("user"));

    this.queryNotReadList()
  },
  mounted() {
    //监听登录事件
    let that = this;
    this.$ac.addEventListener({ name: "loginSuccess" }, function (ret) {
      that.initUser();
    });

    this.$ac.addEventListener({ name: "not-read" }, function (ret) {
      that.queryNotReadList()
    });
  },
  methods: {
    banben() {
      Dialog.alert({
        message: "版本号：V3.11.23.01",
        theme: "round-button",
      }).then(() => {
        // on close
      });
      //alert('版本号：2.0.17');
    },
    //极光推送相关操作
    //删除别名
    deleteAlias() {
      var ajpush = api.require("ajpush");
      var param = { sequence: 102 };
      ajpush.deleteAlias(param, function (ret) { });
    },
    permissionsCheck(titleName) {
      let permissions = false;
      this.list = [];
      this.list = JSON.parse(storage.get("menu"));
      // 权限判断
      if (this.list.length > 0) {
        for (let i = 0; i < this.list.length; i++) {
          let childs = this.list[i].children;
          if (childs.length > 0) {
            for (let j = 0; j < childs.length; j++) {
              if (
                childs[j].meta.title != null &&
                childs[j].meta.title == titleName
              ) {
                permissions = true;
                return permissions;
              }
            }
          }
        }
      }
      return permissions;
    },
    //界面跳转
    jumpOther(route, urlValue, titleName) {
      // if (route != "myFinishTask" && route != "requestOrder") {
      //   if (!this.permissionsCheck(titleName)) {
      //     Dialog.alert({
      //       theme: 'round-button',
      //       title: "提示",
      //       message: "您没有该功能访问权限，请联系管理员！",
      //     }).then(() => {
      //       // on close
      //     });
      //     return;
      //   }
      // }

      api.openWin({
        name: route,
        url: urlValue,
        rect: {
          x: 0,
          y: 150,
          w: api.winWidth,
          h: api.winHeight,
        },
      });
    },

    async initUser() {
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "Loading...",
      });
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() + "/getAppRouters"
        );
        if (res.code === 200) {
          //用户信息
          storage.set("user", res.user);
          this.user = JSON.parse(storage.get("user"));
        }
        Toast.clear();
      } catch (e) {
        Toast.fail(e);
      }
    },

    async logout() {
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "Loading...",
      });
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() + "/logout",
          {}
        );
        //清空登录标志
        // storage.set("loginFlag", "");
        // if(globelTimer.item!==null){
        //   clearInterval(globelTimer.item)
        // } 
        removeToken();
        Toast.clear();
      } catch (e) {
        Toast.fail(e);
      }
    },

    //退出登录
    remove() {
      Dialog.confirm({
        theme: 'round-button',
        title: "此操作将退出系统, 是否继续?",
        message: "",
      })

        .then(() => {
          this.logout();
          //删除极光推送绑定
          this.deleteAlias();

          // removeToken()
          api.openWin({
            name: "login",
            url: "./login-login.html",
            rect: {
              x: 0,
              y: 150,
              w: api.winWidth,
              h: api.winHeight,
            },
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    async load() {
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "Loading...",
      });
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix + "/base/base/sysResource/getResTree",
          {}
        );
        console.log(JSON.stringify(res));
        Toast.clear();
      } catch (e) {
        Toast.fail(e);
      }
    },

    async queryNotReadList() {

      let _this = this;

      try {

        let res = await _httpClientSIE.get(
          _httpClientSIE.getApiPrefix() +
          "/MessageReceived/GetNotReadList?UserID=" + _this.user.userName + "&PageSize=1&PageIndex=1",
        );

        this.notReadNum = res.Total

      } catch (e) {
        this.notReadNum = 0
      }
    },


  },
};
</script>
<style>
.centerDiv {
  width: 70%;
  height: 100px;
  background-color: white;
  margin-left: 15%;
  margin-right: 15%;
  margin-top: -40px;
  border: 1px solid #dcdcdc;
}

.list {
  margin-top: 10px;
  height: 510px;
  border: solid #dcdcdc;
  margin-left: 5px;
  margin-right: 5px;
  border-top-width: 3px;
  border-left-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

.button {
  margin-top: 20px;
  margin-right: 15px;
  margin-left: 15px;
  margin-bottom: 30px;
}
</style>
